<template>
  <div>
    <div class="main" @click="gotolist">
      <van-swipe @change="onChange">
        <van-swipe-item>
          <img src="https://img.fishfay.com/decorate/21070113030025566-1.jpg" alt>
        </van-swipe-item>
        <van-swipe-item>
          <img src="https://img.fishfay.com/decorate/2106301021598221625019692092首页头图.jpg" alt>
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="https://img.fishfay.com/decorate/2107081752273921625737951825微信图片_20210708175210.jpg"
            alt
          >
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="https://img.fishfay.com/decorate/2108181822194861629282165258微信图片_20210818181943.jpg"
            alt
          >
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="rightbox" @click="gotolist">
      <div class="rightbox-item">
        <img src="https://img.fishfay.com/decorate/2108021431114061627885882093热销尖货.jpg" alt>
      </div>
      <div class="rightbox-item">
        <img src="https://img.fishfay.com/decorate/2108021430511231627885861948当季新品.jpg" alt>
      </div>
      <div class="rightbox-item">
        <img src="https://img.fishfay.com/decorate/2108021431028451627885872648官网限定.jpg" alt>
      </div>
      <div class="rightbox-item">
        <img src="https://img.fishfay.com/decorate/2108021431253161627885895724门店同款.jpg" alt>
      </div>
    </div>
    <div class="newpin" @click="gotolist">
      <div>
        <img src="https://img.fishfay.com/decorate/2108121648231611628758118572icon-动图.gif" alt>
      </div>
    </div>
    <div class="xpBox" @click="gotolist">
      <img
        src="https://img.fishfay.com/decorate/2104251550308811619336992132%E5%AE%89%E8%B8%8F%E4%BC%9A%E5%91%98%E9%A6%96%E9%A1%B5V3_08.jpg"
        alt
      >
    </div>

    <div class="rightbox-inner" @click="gotolist">
      <div>
        <img
          src="https://img.fishfay.com/decorate/2107011317086731625116598386微信图片_202107011315312.jpg"
          alt
        >
      </div>
      <div>
        <img
          src="https://img.fishfay.com/decorate/2107011317098771625116598512微信图片_20210701131516.jpg"
          alt
        >
      </div>
      <div>
        <img
          src="https://img.fishfay.com/decorate/2107011317087161625116598433微信图片_202107011315311.jpg"
          alt
        >
      </div>
      <div>
        <img
          src="https://img.fishfay.com/decorate/2107011317088641625116598465微信图片_20210701131531.jpg"
          alt
        >
      </div>
    </div>

    <div class="select_this_week" @click="gotolist">
      <img src="https://img.fishfay.com/decorate/2104251558493291619337490557安踏会员首页V3_12.jpg" alt>
    </div>
    <div class="rightbox-g" @click="gotolist">
      <img src="https://img.fishfay.com/decorate/2107051437251651625467046627新品推荐.png" alt>
      <div class="rightxiaobox">
        <div>
          <img src="https://img.fishfay.com/decorate/2107051437462011625467068604新品推荐_01.png" alt>
        </div>
        <div>
          <img src="https://img.fishfay.com/decorate/2107051438018641625467083764新品推荐_02.png" alt>
        </div>
        <div>
          <img src="https://img.fishfay.com/decorate/2107051438202361625467103023新品推荐_03.png" alt>
        </div>
        <div>
          <img src="https://img.fishfay.com/decorate/2107051438413811625467123773新品推荐_04.png" alt>
        </div>
        <div>
          <img src="https://img.fishfay.com/decorate/2107051438413811625467123773新品推荐_04.png" alt>
        </div>
        <div>
          <img src="https://img.fishfay.com/decorate/2107051439054301625467147645新品推荐_05.png" alt>
        </div>
        <div>
          <img src="https://img.fishfay.com/decorate/2107051439243991625467167437新品推荐_06.png" alt>
        </div>
      </div>
    </div>

    <div class="footer">
      <div class="ft-slogan">
        <img src="https://img.fishfay.com/theme/images/logo/slogan-anta-r.svg" alt>
      </div>
      <div class="custom-service">
        <h4 class="server-btn">
          <i></i>
          <span>在线客服</span>
        </h4>
        <a href="javascript:;" class="weixin-code">
          <img alt src="https://img.fishfay.com/theme/images/antacn/qr-code.jpg">
        </a>
      </div>
      <div class="ft-company">
        <a
          data-ignore="push"
          id="link-icp"
          href="https://beian.miit.gov.cn/"
          style="color: rgb(255, 255, 255); font-size: 13px; display: block; line-height: 22px;"
        >闽ICP备2021011550号-2</a>
        <a
          data-ignore="push"
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=35020302033806"
          style="color: rgb(255, 255, 255); font-size: 13px; display: block; line-height: 22px;"
        >闽公网安备 35020302033806号</a>
        <span>Copyright(C) 2012-2020 by www.ANTA.cn</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 0
    };
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    gotolist() {
      this.$router.push("/list");
    }
  }
};
</script>
<style scoped>
.select_this_week {
  width: 100%;
}
.select_this_week img {
  width: 100%;
}
.van-swipe-item img {
  width: 100%;
  height: 100%;
}
.rightbox-item {
  width: 24%;
}
.rightbox-item img {
  width: 100%;
  height: auto;
}
.newpin {
  width: 100%;
  height: auto;
}
.newpin img {
  width: 100%;
  height: auto;
}
.xpBox {
  width: 100%;
}
.xpBox img {
  width: 100%;
  height: auto;
}
.main {
  margin-top: 54px;
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
.rightbox {
  display: flex;
  white-space: nowrap;
  overflow-x: auto;
}
.rightbox-inner {
  width: 100%;
  display: flex;
  white-space: nowrap;
  overflow-x: auto;
}
.rightbox-inner img {
  width: 328px;
}
.rightbox-g {
  position: relative;
  width: 100%;
  height: auto;
}
.rightbox-g > img {
  width: 100%;
  height: auto;
}
.rightxiaobox {
  width: 100%;
  position: absolute;
  bottom: 2px;
  left: 0;
  display: flex;
  white-space: nowrap;
  overflow-x: auto;
}
.rightxiaobox img {
  width: 165px;
  height: auto;
}
.footer {
  background: #000;
  color: #fff;
}
.footer .ft-slogan img {
  display: inline-block;
  height: auto;
  width: 45%;
}
.footer .ft-slogan {
  text-align: center;
  padding: 50px 0;
}
.footer .custom-service {
  text-align: center;
}
.footer > div {
  border-top: 1px solid #181818;
  margin: 0 15px;
  padding: 20px 0;
}
.custom-service .server-btn {
  color: #888;
  font-size: 14px;
  height: 25px;
  line-height: 25px;
  display: inline-block;
  margin-bottom: 20px;
}
a {
  text-decoration: none;
  color: #333;
}
.custom-service .weixin-code {
  display: block;
}
.footer > div {
  border-top: 1px solid #181818;
  margin: 0 15px;
  padding: 20px 0;
}

.footer .ft-company {
  margin: 0;
  text-align: center;
  color: rgb(255, 255, 255);
  font-size: 13px;
  display: block;
  line-height: 22px;
}
.footer .ft-company a {
  text-align: center;
  color: rgb(255, 255, 255);
  font-size: 11px !important;
  display: block !important;
  line-height: 24px;
}
</style>

